import React from 'react'
import { Form, Input,Spin, Select, Radio, Col,  Button, Modal, message, Breadcrumb } from 'antd'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
const FormItem = Form.Item
const Option = Select.Option
const RadioGroup = Radio.Group
import  config from '../../assets/config';
class questionFrom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            loading:false,
            hasOption:'1',
        }
    }

    // 提交表单
    handleSubmit = (e) => {
        this.props.form.validateFields((errors, values) => {
            this.hideModal()
          if (!!errors) {
            console.log('Errors in form!!!');
            message.error('操作失败!');
            return;
              };
          this.postForm(values)
        });

        //this.props.form.resetFields()
    }
    postForm=(json)=>{
        json.id= this.props.location.state.key;
        this.setState({loading:true});
        fetch(config.base+"question/update",{
                method: 'POST',
                mode: config.cors,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body:config.postBody(json)
        }).then(res=>{return res.json()})
        .then(rep=>{
            this.setState({loading:false});
            rep.status==200? message.success(rep.message): message.error(rep.message);
        })
        .catch((e)=>{console.log(e);message.error(rep.message);this.setState({loading:false});})
    }

    // 显示弹框
    showModal = () => {
        this.setState({ visible: true })
    }


    // 隐藏弹框
    hideModal = () => {
        this.setState({ visible: false })
    }
    componentDidMount() {
        const { key, type, content, optionArr } = this.props.location.state;
        console.log( this.props.location.state)
        this.setState({hasOption:type});
        this.props.form.setFieldsValue({
            id:key,
            content,
            A: optionArr ? optionArr.a : ' ',
            B: optionArr ? optionArr.b : ' ',
            C: optionArr ? optionArr.c : ' ',
            D: optionArr ? optionArr.d : ' '
        })
    }
    render() {
        const { getFieldProps } = this.props.form;
        const {hasOption}=this.state;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 12 }
        }

        return (
        <Spin spinning={this.state.loading}>
        <Breadcrumb ><Breadcrumb.Item><a href="javascript:window.history.go(-1);">返回</a></Breadcrumb.Item></Breadcrumb>
            <Form horizontal onSubmit={this.handleSubmit} className="animated fadeInUp ">
                <FormItem
                    {...formItemLayout}
                     >
                    <Input  type="hidden"
                    {...getFieldProps('id')} />
                </FormItem> 
                <FormItem
                    id="content"
                    label="问题内容"
                    {...formItemLayout}
                     hasFeedback>
                    <Input id="content" placeholder="请输入问题内容..."
                    {...getFieldProps('content', {
                      rules: [
                        { required: true,  message: '请输入问题内容' }
                      ],
                    })} />
                </FormItem>                                   
                <FormItem
                    className = { hasOption === 3 ? 'unactive' : 'active'}
                    id = "optionA"
                    label = "选项A"
                    {...formItemLayout} >
                    <Input type="text" id="optionA" rows="3" 
                    {...getFieldProps('A',{
                      rules: [
                        { required: hasOption !== 3 ? message: '请填写A选项答案' }
                      ],
                    })} />
                </FormItem>
                <FormItem
                    className = { hasOption === 3 ? 'unactive' : 'active'}
                    id = "optionB"
                    label = "选项B"
                    {...formItemLayout} >
                    <Input type="text" id="optionB" rows="3" 
                    {...getFieldProps('B',{
                      rules: [
                        { required: hasOption !== 3,  message: '请填写B选项答案' }
                      ],
                    })} />
                </FormItem>
                <FormItem
                    className = { hasOption === 3 ? 'unactive' : 'active'}
                    id = "optionC"
                    label = "选项C"
                    {...formItemLayout} >
                    <Input type="text" id="optionC" rows="3" 
                    {...getFieldProps('C',{
                      rules: [
                        { required: hasOption !== 3,  message: '请填写C选项答案' }
                      ],
                    })} />
                </FormItem>
                <FormItem
                    className = { hasOption === 3 ? 'unactive' : 'active'}
                    id = "optionD"
                    label = "选项D"
                    {...formItemLayout} >
                    <Input type="text" id="optionD" rows="3" 
                    {...getFieldProps('D',{
                      rules: [
                        { required: hasOption !== 3,  message: '请填写D选项答案' }
                      ],
                    })} />
                </FormItem>
                <FormItem wrapperCol={{ span:12, offset:6 }} style={{ marginTop: 24 }}>
                    <Button  type="primary block" onClick={this.showModal}>确定</Button>
                </FormItem>
                <Modal title="提示" visible={this.state.visible} loading={this.state.iconLoading}   onOk={this.handleSubmit} onCancel={this.hideModal}>
                    确定修改这个问题吗？
                </Modal>
            </Form>
        </Spin>
        )
    }
}

questionFrom = Form.create()(questionFrom)

export default questionFrom